<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="红外详情" :isHome="true" :isBack="true"></navigationTop>
	<view class="main-bg">
		<view class="smoke-detail">
			<view class="mid-body">
				<view class="text-nor">当前状态</view>
				<view class="text-red">异常</view>
				<view class="items-list-wrap">
					<view class="items-list" v-for="(item,indx) in redLineData" :key="indx">
						<view class="name">{{item.name}}</view>
						<view class="door-wrap">
							<view class="left-door">
								<image :src="$store.state.baseImg + '/icon/redLine.png'"></image>
							</view>
							<view class="right-door">
								<view v-if="item.status == 4" class="status red-level4">告警状态：</view>
								<view v-else-if="item.status == 3" class="status orange-level3">告警状态：</view>
								<view v-else-if="item.status == 2" class="status yellow-level2">告警状态：</view>
							</view>
						</view>
					</view>	
				</view>
			</view>
		</view>
	</view>
	</view>			
</template>

<script>
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{navigationTop},
		data() {
			return {
				redLineData:[
					{name:"信息机房红外1",status:3},
					{name:"信息机房红外2",status:4},
					{name:"信息机房红外3",status:2}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.smoke-detail{
	padding: 80rpx 30rpx;
	background: rgba(255,255,255,0.9);
	height: 100%;
}
.mid-body{
	box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	min-height: 100%;
	padding: 25rpx;
}
.items-list-wrap{
	margin-top: 30rpx;
}
.text-nor{color:$ky-main-color;text-align: center;}
.text-red{color: $dangerColor;text-align: center;}
.left-door image{width: 55rpx;height: 55rpx;margin-right: 40rpx;margin-left: 50rpx;margin-top: 10rpx;}
.items-list .name{color: $ky-main-color;text-align: center;margin-bottom:10rpx;}
.items-list{
	box-shadow: 0 0 10rpx #ccc;
	// box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	padding: 30rpx 120rpx;
	margin-bottom: 30rpx;
}
.door-wrap{display: flex;}
.right-door .status{
	height: 55rpx;line-height: 55rpx;position: relative;width: 200rpx;
}
.right-door .status::after{
	top: 15rpx;right: 10rpx;
}
</style>
